import React, { useEffect, useState } from 'react';
import { getProList, getCategory, updateFlag, searchPro } from '../../api/pro'
import { Table, Image, Switch, Select, Input, Button } from 'antd';

const Index = () => {

  // 存放我们商品数据用的
  const [proList, setProList] = useState()

  // 当前页码
  const [current, setCurrent] = useState(1)
  // 每页显示的条数
  const [pageSize, setPageSize] = useState(5)

  const [category,setCategory] =  useState()

  useEffect(()=>{
    getProList().then(res => {
      // console.log(res);
      setProList(res.data)
    })

    getCategory().then(res => {
      // console.log(res);
      const arr = []
      res.data.forEach(item => {
        arr.push({
          text: item,
          value: item
        })
      })
      setCategory(arr)
    })
  }, [])

  const columns = [
    {
      title: '序号',
      // render 自定义单元格内容用的
      render: (text, record, index)=>{
        return (<span>{(current - 1) * pageSize + index + 1}</span>)
      }
    },{
      title: '商品名称',
      dataIndex: 'proname'
    },{
      title: '商品图片',
      dataIndex: 'img1',
      render: (text, record, index)=>{
        /*
          text: 是 dataIndex 对应字段的内容，让 dataIndex 不写的时候会和record一样是所有数据
          record：是当前行所有的数据
          index： 索引值
        */
        // console.log(text, record, index);
        return (<Image src={text} height={'50px'} />)
      }
    },{
      title: '商品分类',
      dataIndex: 'category',
      filters: category, // 要的数据类型是 [{text: '', value: ''}]
      onFilter: (value, record) => {
        // console.log(record.category.includes(value));
        return record.category.includes(value)
      },
    },{
      title: '商品品牌',
      dataIndex: 'brand'
    },{
      title: '商品价格',
      dataIndex: 'originprice',
      // 排序
      sorter: (a, b) => a.originprice - b.originprice,
      showSorterTooltip: {
        title: '点击排序'
      }
    },{
      title: '商品折扣',
      dataIndex: 'discount',
      sorter: (a, b) => a.discount - b.discount,
      showSorterTooltip: {
        title: '点击排序'
      }
    },{
      title: '商品库存',
      dataIndex: 'stock',
      sorter: (a, b) => a.stock - b.stock,
      showSorterTooltip: {
        title: '点击排序'
      }
    },{
      title: '是否售卖',
      dataIndex: 'issale',
      render: (text)=>{
        return (<Switch defaultChecked={text}></Switch>)
      }
    },{
      title: '是否推荐',
      dataIndex: 'isrecommend',
      render: (text,record)=>{
        return (<Switch defaultChecked={text} onChange={(checked)=>{
          // console.log(checked);
          updateFlag({
            flag: checked,
            proid: record.proid,
            type: ''
          })
        }}></Switch>)
      }
    },{
      title: '是否秒杀',
      dataIndex: 'isseckill',
      render: (text)=>{
        return (<Switch defaultChecked={text}></Switch>)
      }
    },{
      title: '操作'
    }
  ]

  // 定义查询条件
  const [searchText,setSearchText] = useState()
  const [searchCategory,setSearchCategory] = useState()

  return (
    <div>
      <h3>产品列表</h3>

      {/* 检索 */}
      <div style={{display: 'flex'}}>
        <Select onChange={(text)=>{
          // console.log(text);
          setSearchCategory(text)
        }} style={{width: 160}} placeholder={'请选择商品类型'} options={category}></Select>
        <Input onChange={(event)=>{
          // console.log(event.target.value);
          setSearchText(event.target.value)
        }} style={{width: 260}} placeholder='请输入商品关键字' />
        <Button style={{backgroundColor: '#69db7c', color: '#fff'}} onClick={()=>{
          // console.log(searchText,searchCategory);
          searchPro({
            category: searchCategory,
            search: searchText
          }).then(res => {
            setProList(res.data)
          })
        }}>查询</Button>
      </div>

      <Table
        dataSource={proList}
        scroll={{
          x: 1500,
        }}
        pagination= {{
          defaultPageSize: 5,
          current,
          showSizeChanger: false,
          onChange: (page, pageSize)=>{
            // 设置当前页
            setCurrent(page)
            setPageSize(pageSize)
          }
        }}
        rowKey='proid'
        columns={columns}
      />
    </div>
  );
};

export default Index;
